<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>

  <script>
    const routes = [
      {
        path: '/acl',
        name: '权限管理',
        component: 'Layout',
        // redirect: '/acl/user/list'
        children: [
          {
            path: 'user/list',
            name: '用户管理',
            component: 'acl/user/list'
          },
          {
            path: 'role/list',
            name: '角色管理',
            component: 'acl/role/list'
          },
          {
            path: 'menu/list',
            name: '菜单管理',
            component: 'acl/menu/list'
          }
        ]
      }
    ]
    // #region
    /*  function getRouteList(routes) {
      let list = []
      routes.forEach((item, index) => {
        if (item.children && item.children.length) {
          const { path, name } = item
          const route = {
            path,
            name,
            component: () => import(`@/views/${item.path}.vue`)
          }
          list.push(route)

          // 获得处理后子级路由
          const getHandlerChildrenRoutes = handlerChildrenRoutes(item)
          getHandlerChildrenRoutes.forEach((child) => {
            list.push(child)
          })
        }
      })
      return list
    }

    // 处理子级路由
    function handlerChildrenRoutes(item) {
      const childrenRoutes = []
      item.children.forEach((child) => {
        const { path, name } = child
        let childRoute = {
          path: `${item.path}/${path}`,
          name,
          component: () => import(`@/views/${child.component}.vue`)
        }
        childrenRoutes.push(childRoute)
      })
      return childrenRoutes
    }

    // map方法相当于对原有数据遍历了并且传入了每个元素所以调用时无需再传入
    function handleChild(item) {
      const { path, name } = item
      const route = {
        path,
        name,
        component: () => import(`@/views/${item.component}.vue`)
      }
      return route
    } */
    //#endregion
    let finalRouteList = []
    function getRouteList(routes) {
      let routeList = []
      routes.forEach((item, index) => {
        const { path, name } = item
        const route = {
          path,
          name,
          component: () => import(`../views/${item.component}.vue`)
        }
        routeList.push(route)
        if (item.children && item.children.length) {
          route.children = getRouteList(item.children)
          route.component = JSON.parse(JSON.stringify(item.component))
          route.redirect = `/${item.children[0].component}`
          finalRouteList.push(route)
        }
      })
      return routeList
    }

    const res = getRouteList(routes)
    console.log(res)
  </script>
</html>
